<template>
	<view class="box">
		<!-- 选择项目 -->
		<view class="search">
			<u-search searchIconSize="50" shape="round" placeholder="请输入搜索内容" height="70rpx" :showAction="false"
				bgColor="#F8F8F8"></u-search>
		</view>
		<view class="optios">
			<view class="container">
				<!-- 侧边栏 -->
				<view class="sidebar">
					<view v-for="(item, index) in sidebarList" :key="index"
						:class="{ 'sidebar-item': true, 'active': activeTabs === index }"
						@click="handleSidebarClick(index)">
						{{ item }}
					</view>
				</view>

				<!-- 主内容区域 -->
				<view class="main-content">
					<!-- 内容区域 -->
					<view v-for="(tab, index) in tabs" :key="index" v-show="activeTabs === index" class="tab-content">
						<view class="intro-content">
							<template v-if="Array.isArray(tab.content)">
								<view class="intro-content-list" v-for="(item, itemIndex) in tab.content"
									:key="itemIndex">
									<view class="_img">
										<image :src="item.imgUrl" mode=""></image>
									</view>
									<view class="intro-content-info">
										<view class="content-info-top">
											{{ item.content }}
										</view>
										<view class="content-info-center">
											<text class="_text">60分钟</text>
											<text class="__text">每周1-2次</text>
										</view>
										<view class="content-info-bottom">
											<span class="_span">￥</span><span class="__span">{{ item.number }}</span>
										</view>
									</view>
									<view class="counter-container">
										<image src="../../static/选择项目_slices/减.png" @click="decrement"
											class="counter-button" />
										<text class="counter-value">{{ counter }}</text>
										<image src="../../static/选择项目_slices/加.png" @click="increment"
											class="counter-button" />
									</view>
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				counter: 0,
				activeTab: 0,
				sidebarList: ['全部', '按摩', '艾灸', '耳穴', '正骨', ], // 侧边栏选项列表
				tabs: [ // 选项卡内容
					{
						id: 1,
						content: [{
								id: 1,
								content: '艾灸',
								imgUrl: '../../static/logo.png',
								number: '598',
								number2: '¥7176',
								time: '60分钟',
								time2: '每周1-2次'
							},
							{
								id: 2,
								content: '耳穴治疗',
								imgUrl: '../../static/logo.png',
								number: '598',
								number2: '¥7176',
								time: '60分钟',
								time2: '每周1-2次'
							},
							{
								id: 3,
								content: '按摩推拿',
								imgUrl: '../../static/logo.png',
								number: '598',
								number2: '¥7176',
								time: '60分钟',
								time2: '每周1-2次'
							}
						]
					},
					{
						content: '内容2'
					},
					{
						content: '内容3'
					},
					{
						content: '内容4'
					},
					{
						content: '内容5'
					}
				],
				activeTabs: 0 // 当前选中的选项卡索引
			}
		},
		methods: {
			handleSidebarClick(index) {
				// 点击侧边栏选项时，切换到对应的选项卡
				this.activeTabs = index;
			},
			increment() {
				this.counter++;
			},
			decrement() {
				if (this.counter > 0) {
					this.counter--;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		height: 100vh;

		.search {
			background-color: #FFFFFF;
			padding: 20rpx 22rpx 20rpx 24rpx;
		}

		.optios {
			width: 750rpx;
			margin-top: 16rpx;
			height: calc(100% - 132rpx);
			background-color: #FFFFFF;
		}

		.container {
			display: flex;
		}

		.sidebar {
			width: 158rpx;
			height: 860rpx;
			/* 侧边栏宽度 */
			text-align: center;
			background-color: #F8F8F8;
			font-weight: 600;
		}

		.sidebar-item {
			cursor: pointer;
			height: 122rpx;
			line-height: 122rpx;
		}

		.sidebar-item.active {
			background-color: #FFFFFF;
			/* 背景蓝色 */
			border-left: 8rpx solid #C19C55;
		}

		.main-content {
			flex: 1;
			/* 主内容区域占据剩余空间 */
		}

		.tab-content {
			.intro-content {
				height: 216rpx;
				background: #FFFFFF;

				.intro-content-list {
					display: flex;
					border-radius: 20rpx;
					margin-top: 20rpx;
					position: relative;
					border-bottom: 2rpx solid #F4F4F6;
				}

				.intro-content-list2 {
					display: flex;
					width: 534rpx;
					height: 202rpx;
					background: #F8F8F8;
					border-radius: 44rpx 44rpx 44rpx 10rpx;
					background-image: url('../../static/logo.png');
					background-repeat: no-repeat;
					background-position: right;
					margin-top: 20rpx;
					margin-left: 20rpx;
				}

				._img {
					width: 172rpx;
					height: 171rpx;
					margin-top: 20rpx;
					margin-left: 22rpx;
					margin-bottom: 24rpx;

					image {
						width: 172rpx;
						height: 171rpx;
					}
				}

				.intro-content-info {
					.content-info-top {
						height: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: 500;
						font-size: 28rpx;
						color: #202022;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						margin-top: 36rpx;
						margin-left: 20rpx;
					}

					.content-info-center {
						height: 36rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: 400;
						font-size: 22rpx;
						color: #939688;
						line-height: 34rpx;
						text-align: center;
						border-radius: 6rpx;
						margin-top: 24rpx;
						margin-left: 20rpx;
						margin-bottom: 16rpx;
						display: flex;

						._text {
							display: inline-block;
							width: 100rpx;
							height: 36rpx;
							background: #FEF8F0;
							border-radius: 6rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #867C76;
							line-height: 36rpx;
							text-align: center;
							margin-right: 10rpx;
						}

						.__text {
							display: inline-block;
							width: 132rpx;
							height: 36rpx;
							background: #FEF8F0;
							border-radius: 6rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #867C76;
							line-height: 36rpx;
							text-align: center;
						}
					}

					.content-info-bottom {
						margin-left: 24rpx;

						._span {
							font-family: OPPOSans, OPPOSans;
							font-weight: normal;
							font-size: 24rpx;
							color: #C19C55;
							line-height: 38rpx;
							text-align: left;
							font-style: normal;
						}

						.__span {
							height: 62rpx;
							font-family: OPPOSans, OPPOSans;
							font-weight: normal;
							font-size: 40rpx;
							color: #C19C55;
							line-height: 62rpx;
							text-align: left;
							font-style: normal;
							font-weight: 600;
						}

						.___span {
							height: 24rpx;
							font-family: SourceHanSansCN, SourceHanSansCN;
							font-weight: 400;
							font-size: 24rpx;
							color: #AAAAAA;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-decoration-line: line-through;
							margin-left: 20rpx;
							display: inline-block;
						}
					}
				}

				.counter-container {
					width: 144rpx;
					height: 36rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					justify-content: space-around;
					position: absolute;
					bottom: 28rpx;
					right: 2rpx;
				}

				.counter-button {
					width: 36rpx;
					height: 36rpx;
				}

				.counter-value {
					font-weight: 400;
					font-size: 30rpx;
					color: #29292B;
				}
			}
		}
	}
</style>